<template>
    <t-modal :title="title" :width="1000" :visible="visible" :confirmLoading="loading" @ok="() => { $emit('ok') }"
        @cancel="() => { $emit('cancel') }" destroyOnClose>
        <a-spin :spinning="loading">
            <a-form :form="form">
                <a-form-item>
                    <span class="page-text">SQL表达式</span>
                    <span class="action-margin"></span>
                    <a-tooltip v-if="title == '新建数据视图'" placement="right" overlayClassName="custom-tip">
                        <template slot="title">
                            <div style="display: flex;">
                                <div>
                                    <p style="margin-bottom: 8px;color: black;">
                                        <span style="font-size: 18px;">MySQL: </span>
                                        CREATE VIEW 视图名称 AS SELECT * FROM 现有的表
                                    </p>
                                    <p style="margin-bottom: 8px;color: black;">
                                        <span style="font-size: 18px;">PostgreSQL: </span>
                                        CREATE [ OR REPLACE ] [ TEMP | TEMPORARY ] VIEW view_name AS select_statement;
                                    </p>
                                    <p style="margin-bottom: 8px;color: black;">
                                        <span style="font-size: 18px;">Oracle: </span>
                                        CREATE [OR REPLACE] [FORCE|NOFORCE] VIEW view_name[(alias1, alias2, ... , aliasn)]
                                        AS SELECT column1, column2, ...,columnn
                                        FROM table1, table2, ...,tablen
                                        WHERE condition;
                                    </p>
                                    <p style="margin-bottom: 8px;color: black;">
                                        <span style="font-size: 18px;">SqlServer: </span>
                                        CREATE [ OR ALTER ] [ VIEW ] [ schema_name . ] view_name [ (column [ ,...n ] ) ]
                                        [ WITH view_attribute [ ,...n ] ]
                                        AS select_statement
                                        [ WITH CHECK OPTION ]
                                        [ ; ]
                                    </p>
                                    <p style="margin-bottom: 8px;color: black;">
                                        <span style="font-size: 18px;">达梦数据库: </span>
                                        CREATE [ OR REPLACE ] VIEW [ schema_name .] view_name [(column [ ,...n ])]
                                        AS select_statement [ WITH CHECK OPTION ]
                                    </p>
                                    <p style="margin-bottom: 8px;color: black;">
                                        <span style="font-size: 18px;">人大金仓数据库: </span>
                                        CREATE VIEW view_name [ ( column_list ) ] [ ; shared | exclusive ]
                                        AS SQL_query_expression
                                    </p>
                                </div>
                            </div>
                        </template>
                        <a-icon type="question-circle" />
                    </a-tooltip>
                    <a-tooltip v-else placement="bottomRight" overlayClassName="custom-tip">
                        <template slot="title">
                            <div style="display: flex;">
                                <div>
                                    <h3>MySQL</h3>
                                    <p style="margin-bottom: 8px;color: black;">
                                        alter view [视图名称] as select [选中的字段] from [视图基于的表]
                                    </p>
                                    <!-- <h3>PostgreSQL</h3>
                                    <p style="margin-bottom: 8px;color: black;">
                                    </p>
                                    <h3>Oracle</h3>
                                    <p style="margin-bottom: 8px;color: black;">
                                    </p>
                                    <h3>SqlServer</h3>
                                    <p style="margin-bottom: 8px;color: black;">
                                    </p>
                                    <h3>达梦数据库</h3>
                                    <p style="margin-bottom: 8px;color: black;">
                                    </p>
                                    <h3>人大金仓数据库</h3>
                                    <p style="margin-bottom: 8px;color: black;">
                                    </p> -->
                                </div>
                            </div>
                        </template>
                        <a-icon type="question-circle" />
                    </a-tooltip>
                    <div class="monaco-container">
                        <Monaco ref="monaco" :data="sqlData" width="100%" language="java" :opts="{ theme: 'vs' }"
                            height='300px' v-decorator="['sql']">
                        </Monaco>
                    </div>
                </a-form-item>
            </a-form>
        </a-spin>
    </t-modal>
</template>

<script>
import pick from 'lodash.pick'
import { Monaco } from "@/components";
// 表单字段
const fields = [
    'uuid',
    'sql'
]
export default {
    components: {
        Monaco
    },
    props: {
        visible: {
            type: Boolean,
            required: true
        },
        loading: {
            type: Boolean,
            default: () => false
        },
        model: {
            type: Object,
            default: () => null
        }
    },
    data() {
        return {
            title: "",
            size: 'default',
            sqlData: '',
            labelCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 5
                }
            },
            wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 16
                }
            },
            form: this.$form.createForm(this)
        }
    },
    methods: {
        add(m, data) {
            console.log(m, data)
        },
        edit(m, data) {
            console.log(m, data)
        },
    },
    created() {
        // 防止表单未注册
        fields.forEach(v => this.form.getFieldDecorator(v))
        // 当 model 发生改变时，为表单设置值
        this.$watch('model', () => {
            this.sqlData = this.model.columsData
            this.model && this.form.setFieldsValue(pick(this.model, fields))
        })
    }
}
</script>
<style lang="less">
.page-text {
    font-weight: 600;
    font-size: 18px;
}
</style>
